<template>
  <div>
    <Upload
      ref="upload"
      action="https://upload-z2.qiniup.com"
      :limit="1"
      type="drag"
      accept="mp3"
      :show-file-list="showFileList"
      :show-upload-list="true"
      :data="qiniuData"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
    >
      <div style="padding: 40px 0;">
        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
        <p>点击或拖拽上传1</p>
      </div>
    </Upload>

    <audio id="music" :src="prefix + audio"></audio>

    <Table highlight-row :columns="columns" :data="data"></Table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      qiniuData: {
        token: "",
        key: ""
      },
      showFileList: false,
      audio: "",

      list: [],
      data: [],
      columns: [
        { title: "展品名称", key: "name", align: "center" },
        { title: "展品音频", key: "lang", align: "center" },
        { title: "讲解员ID", key: "id1", align: "center" },
        { title: "展品", key: "id2", align: "center" },
        {
          title: "操作",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: { type: "error" },
                  on: {
                    click: () => {
                      this.del(params);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ]
    };
  },
  props: {
    clear: Boolean,
    goodsList: Array
  },
  watch: {
    clear: function() {
      this.$refs.upload.clearFiles();
    },
    goodsList: function(data) {
      this.list = data;
      this.clearAll();
    }
  },
  mounted() {
    this.getFilePrefix();
    this.getAccessToken();
    this.getAudioTime();
  },
  methods: {
    // 获取上传文件的前缀
    getFilePrefix() {
      this.$http(
        "/stage/file/getFilePrefix",
        {
          museumId: this.$store.state.museumId
        },
        "get",
        res => {
          if (res.data.code == 200) {
            this.qiniuData.key = res.data.data;
          } else {
            this.$Message.error(res.data.msg);
          }
        }
      );
    },
    // 获取上传文件token
    getAccessToken() {
      this.$http("/stage/file/getAccessToken", {}, "get", res => {
        if (res.data.code == 200) {
          this.qiniuData.token = res.data.data;
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },
    // 上传验证
    beforeAvatarUpload(file) {
      this.getFilePrefix();
      this.getAccessToken();
      const isLt10M = file.size / 1024 / 1024 < 500;
      if (!isLt10M) {
        this.$Message.error("上传音频大小不能超过 500MB!");
      }
      return isLt10M;
    },
    // 上传完毕
    handleAvatarSuccess(res, file) {
      let lang = file.name.split("_")[0],
        name = file.name.split("_")[1],
        id1 = file.name.split("_")[2],
        id2 = file.name.split("_")[3].split(".")[0],
        have = false,
        num = 0,
        that = this;

      for (let i = 0; i < this.list.length; i++) {
        if (id2 == this.list[i].id) {
          this.data.push({
            lang: lang,
            name: name,
            id1: id1,
            id2: this.list[i].name,
            id3: id2,
            url: file.response.key,
            duration: 0
          });
          have = true;
          num = this.list.length;
          break;
        }
        num++;
      }

      var time = setInterval(function() {
        if (num == that.list.length) {
          if (have) {
            that.$Message.success("上传成功");
            that.audio = file.response.key;
          } else {
            that.$Message.error("失败，没有对应的展品");
          }
          clearInterval(time);
        }
      }, 0);

      this.$refs.upload.clearFiles();
    },
    // 删除
    del(params) {
      this.data.splice(params.index, 1);
      this.$Message.success("删除音频成功");
      this.$emit("uploadAudio", this.data);
    },
    // 清空已上传音频
    clearAll() {
      this.data = [];
      this.$emit("uploadAudio", this.data);
    },
    // 传递时间
    getAudioTime() {
      let that = this;
      let music = document.getElementById("music");
      music.oncanplaythrough = function() {
        that.data[that.data.length - 1].duration = music.duration;
        that.$emit("uploadAudio", that.data);
        that.audio = "";
      };
    }
  }
};
</script>